<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="所属分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="secondType">
              <j-dict-select-tag type="radioButton" v-model="model.secondType" dictCode="article_news" placeholder="请选择二级分类" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
<!--            <a-card :bordered="false" title="中文">-->
              <a-row>
                <a-col :span="24">
                  <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
                    <a-input v-model="model.title" placeholder="请输入标题"  ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="置顶" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isTop">
                    <j-dict-select-tag @change="zhidingChange" type="radioButton" v-model="model.isTop" dictCode="yn" placeholder="请选择是否置顶" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="isTopChoose">
                  <a-form-model-item label="置顶背景图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="backgroundImageUrl" extra="请上传1920px*1103px尺寸的图片">
                    <j-image-upload :isMultiple="false"  v-model="model.backgroundImageUrl" ></j-image-upload>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="简介" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subtitle">
                    <a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" v-model="model.subtitle" placeholder="请输入简介"  ></a-textarea>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content">
                    <j-editor v-model="model.content" toolbar="undo redo | fontsizeselect | formatselect | bold italic indent2em | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen"/>
                  </a-form-model-item>
                </a-col>

                <a-col :span="24">
                  <a-form-model-item label="缩略图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="imageUrl" extra="请上传356px*267px尺寸的图片">
                    <j-image-upload :isMultiple="false"  v-model="model.imageUrl" ></j-image-upload>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="启用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isEnabled">
                    <j-dict-select-tag  type="radioButton" v-model="model.isEnabled" dictCode="yn" placeholder="请选择是否启用" />
                  </a-form-model-item>
                </a-col>
              </a-row>
<!--            </a-card>-->
          </a-col>
<!--          <a-col :span="12">
            <a-card :bordered="false" title="英文">
              <a-row>
                <a-col :span="24">
                  <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="titleEn">
                    <a-input v-model="model.titleEn" placeholder="请输入标题"  ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="简介" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subtitleEn">
                    <a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" v-model="model.subtitleEn" placeholder="请输入简介"  ></a-textarea>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contentEn">
                    <j-editor v-model="model.contentEn" />
                  </a-form-model-item>
                </a-col>

                <a-col :span="24">
                  <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="imageUrlEn">
                    <j-image-upload isMultiple  v-model="model.imageUrlEn" ></j-image-upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-card>
          </a-col>-->
        </a-row>

      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'PlatformArticleForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        isTopChoose:false,
        model:{
          firstType:1,
          isTop:0,
          isEnabled:0
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           title: [
              { required: true, message: '请输入标题!'},
           ],
           content: [
              { required: true, message: '请输入内容!'},
           ],
          imageUrl:[
            { required: true, message: '请上传文章缩略图!'},
          ],
           secondType: [
              { required: true, message: '请输入二级分类!'},
           ],
          backgroundImageUrl:[
            { required: true, message: '请上传置顶文章背景图!'},
          ],
          subtitle:[
            { required: true, message: '请输入内容!'},
          ],
        },
        url: {
          add: "/article/platformArticle/add",
          edit: "/article/platformArticle/edit",
          queryById: "/article/platformArticle/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      // this.model.firstType = 1
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        if (this.model.isTop==1){
          this.isTopChoose = true
        }else {
          this.isTopChoose = false
        }
        this.visible = true;
      },
      zhidingChange(e){
        console.log(e)
        if (e==1){
          this.isTopChoose = true
        }else {
          this.isTopChoose = false
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
    }
  }
</script>